<template>
  <view class="new-or-edit-modal">
    <up-popup v-model:show="show" overlay mode="bottom" touchable maxHeight="'80%'" closeable closeOnClickOverlay
      @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">处理违章</view>
        </view>
        <!-- uview-plus的表单，包含标题，公告内容，单选是否弹窗推送，状态下拉，确认按钮 -->
        <up-form labelPosition="left" :model="formModel" :rules="rules" ref="formRef">
          <up-form-item labelWidth="100" label="违章状态" prop="bizStatus">
            <up-radio-group v-model="formModel.bizStatus">
              <up-radio label="违章" name="0"></up-radio>
              <up-radio label="未违章" name="1"></up-radio>
            </up-radio-group>
          </up-form-item>
          <up-form-item labelWidth="100" label="处理状态" prop="dealStatus">
            <up-radio-group v-model="formModel.dealStatus">
              <up-radio label="待处理" name="0"></up-radio>
              <up-radio label="挂起" name="1"></up-radio>
              <up-radio label="已处理" name="2"></up-radio>
              <up-radio label="取消" name="3"></up-radio>
            </up-radio-group>
          </up-form-item>
          <up-form-item labelWidth="100" label="备注" prop="dealRemark">
            <up-input v-model="formModel.dealRemark" placeholder="请输入处理备注" />
          </up-form-item>
          <up-form-item labelWidth="100" label="上传图片" prop="fileUrl">
            <up-upload v-model="uploadImages" :maxCount="3" :maxSize="1024 * 1024 * 10" accept="image/*" @after-read="afterRead" />
          </up-form-item>
        </up-form>
      </view>

      <view class="modal-footer">
        <up-button type="primary" @click="submit" :loading="loading">确认</up-button>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { dealVideoStakeForbid } from '@/api';

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["confirm", "cancel"]);

const formRef = ref(null);
const loading = ref(false);
const uploadImages = ref([]);
defineOptions({ name: "CheckModal" });

// 创建响应式数据  
const show = defineModel<boolean>("show", { default: false });

const formModel = ref(createDefaultModel());

/**
 * 数据模型
 * bizStatus: 违章状态 0.违章 1.未违章
 * dealStatus: 处理状态 0.待处理 1.挂起 2.已处理 3.取消
 * dealRemark: 处理备注
 * fileUrl: 图片集合，多个英文逗号隔开
 * bizCode: 违章ID
 */
function createDefaultModel() {
  return {
    bizCode: '',
    bizStatus: '0',
    dealStatus: '2', // 默认已处理
    dealRemark: '',
    fileUrl: '',
  };
}

const rules = reactive({
  bizStatus: [{ required: true, message: '请选择违章状态', trigger: 'change' }],
  dealStatus: [{ required: true, message: '请选择处理状态', trigger: 'change' }],
  dealRemark: [{ required: true, message: '请输入处理备注', trigger: 'blur' }],
})

// 处理图片上传
const afterRead = (event) => {
  const { file } = event;
  // 这里应该有上传图片到服务器的逻辑，获取图片URL
  // 简化处理，直接使用本地路径
  if (formModel.value.fileUrl) {
    formModel.value.fileUrl += ',' + file.url;
  } else {
    formModel.value.fileUrl = file.url;
  }
  console.log('当前图片URLs:', formModel.value.fileUrl);
};

const submit = async () => {
  try {
    await formRef.value.validate();
    loading.value = true;
    
    console.log('提交数据:', formModel.value);
    
    const res = await dealVideoStakeForbid(formModel.value);
    if (res.success) {
      uni.showToast({
        title: "处理成功",
        icon: "success",
      });
      emit("confirm");
      show.value = false;
    } else {
      uni.showToast({
        title: res.msg || "处理失败",
        icon: "error",
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

// 打开弹窗时初始化数据
function open() {
  formModel.value = createDefaultModel();
  uploadImages.value = [];
  
  // 从 props 中获取 bizCode
  if (props.rowData && props.rowData.bizCode) {
    formModel.value.bizCode = props.rowData.bizCode;
    console.log('设置 bizCode:', formModel.value.bizCode);
  }
}

function close() {
  // 关闭逻辑，重置表单
  formModel.value = createDefaultModel();
  uploadImages.value = [];
  emit("cancel");
}
</script>

<style scoped lang="scss">
.new-or-edit-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .modal-content {
    padding: 20rpx;
  }
}
</style>
